<script setup lang="ts">
defineOptions({
  name: "selfInfo"
});
import userProduct from "./components/UserProduct.vue";
import List from "@/components/List/index.vue";
import { onMounted, reactive, ref } from "vue";
import { getUserInfo, get_user_log, pay_request, getOrderDetail } from "@/api/user";
import { message } from "@/utils/message";
onMounted(() => {
  getUserinfo()
  get_user_log_list();
  getWidth()
});
const userInfo = ref({});
const centerDialogVisible = ref(false);

const pay_type = ref("0");
const pay_url= ref("");
const log_column = ref([
  {
    label: "操作方式",
    prop: "action"
  },
  {
    label: "时间",
    prop: "created_at"
  }
]);
const money_form = reactive({
  num: 0,
  change_type: "",
  change_types: [
    {
      value: "add",
      label: "增加"
    },
    {
      value: "low",
      label: "减少"
    },
    {
      value: "cover",
      label: "覆盖"
    }
  ],
  other: ""
});
//提交充值支付
const topay = async () => {
  // centerDialogVisible.value = false;
  let res = await pay_request({ pay_price: money_form.num, pay_type: pay_type.value });
  console.log('提交充值', res);
  if (res.data.data.type == 'html') {
    pay_url.value = res.data.data.html;
    pay_dialog.value = true;
    console.log('订单信息', res.data.trade_id);
    //查询订单信息
    check_order(res.data.trade_id) 
  } else {
    pay_src.value = res.data.data.img;
    
  }
};
const pay_dialog = ref(false);
const pay_src=ref('')
const user_log = ref([]);
function get_user_log_list() {
  get_user_log().then(res => {
    user_log.value = res.data.data;
  });
}
const getUserinfo = async () => {
  let res2 = await getUserInfo();
  console.log("用户信息", res2);
  userInfo.value = res2.data.data;
}
//检查订单状态
const check_order = async (id, maxRetries = 5, retryInterval = 3000) => {
  let retries = 0;
  const checkStatus = async () => {
    const res = await getOrderDetail(id);
    console.log(res.data.data.trade_state, "订单信息");
    if (res.data.data.trade_state === 1) {
      pay_dialog.value = false;
      getUserinfo();
      message("支付成功", { type: 'success' });
      return;
    }
    // 如果达到最大重试次数，停止重试
    if (retries >= maxRetries) {
      console.error("达到最大重试次数，订单状态仍不是1");
      return;
    }
    // 未达到最大重试，等待一段时间后重试
    retries++;
    setTimeout(checkStatus, retryInterval);
  };
  checkStatus();
};
//响应式
const widthcolumn=ref(4)
const getWidth = () => {
  let screenWidth = window.innerWidth;
  console.log('屏幕宽度:', screenWidth);
  if (screenWidth < 768) {
    widthcolumn.value = 2
  }
}

</script>

<template>
  <div class="body">
    <el-descriptions title="用户信息" direction="vertical" :column="widthcolumn" size="default" border>
      <el-descriptions-item label="用户名">{{
        userInfo.username
        }}</el-descriptions-item>
      <el-descriptions-item label="手机号码">{{
        userInfo.phone
        }}</el-descriptions-item>
      <el-descriptions-item label="邮箱" :span="2" >{{
        userInfo.email || "--"
        }}</el-descriptions-item>
      <el-descriptions-item label="注册时间">
        <el-tag size="small">{{ userInfo.created_at }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="账户余额">
        {{ userInfo.balance }} 元
        <el-button type="primary" @click="centerDialogVisible = true">充值</el-button>
      </el-descriptions-item>
      <el-descriptions-item label="实名认证">
        <el-tag v-if="userInfo.real_name_state == 0" type="danger" size="small" effect="dark">
          <router-link to="/self/realname">点击实名</router-link></el-tag>
        <!-- <el-tag
          v-if="userInfo.real_name_state == 1"
          type="primary"
          size="small"
          effect="dark"
          >审核中</el-tag
        > -->
        <el-tag v-if="userInfo.real_name_state == 1 && userInfo.real_name_type == 1" type="success" size="small"
          effect="dark">个人认证</el-tag>
        <el-tag v-if="userInfo.real_name_state == 1 && userInfo.real_name_type == 2" size="small"
          effect="dark">企业认证</el-tag>
      </el-descriptions-item>
      <el-descriptions-item v-if="userInfo.real_name_state == 1" label="姓名">{{
        userInfo.name
        }}</el-descriptions-item>
      <el-descriptions-item v-if="userInfo.real_name_state == 1" label="身份证">{{ userInfo.card_id }}
      </el-descriptions-item>
    </el-descriptions>

    <!-- tab栏 -->
    <el-tabs type="border-card" class="info_table">
      <el-tab-pane label="我的产品">
        <userProduct />
      </el-tab-pane>
      <el-tab-pane label="操作日志">
        <List url="/v1/user/procedure/get_user_log" :column="log_column" />
      </el-tab-pane>
    </el-tabs>

    <!-- 余额修改 -->
    <el-dialog v-model="centerDialogVisible" title="账户充值" width="50%" center>
      <div>
        <el-form label-width="auto" :model="money_form" style="max-width: 600px">
          <el-form-item label="充值金额">
            <el-input v-model="money_form.num" type="number" width="20px" placeholder="充值金额" />
          </el-form-item>
          <el-form-item label="充值方式">
            <el-radio-group v-model="pay_type">
              <el-radio value="0" border>支付宝支付</el-radio>
              <el-radio value="1" border>微信支付</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="扫码支付" v-if="pay_src!=''">
            <el-image style="width: 100px; height: 100px" :src="pay_src" />
          </el-form-item>
        </el-form>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="centerDialogVisible = false">关闭</el-button>
          <el-button type="primary" @click="topay">
            提交订单
          </el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog title='支付' v-model="pay_dialog" style="width: 90%;height:1000px">
      <iframe :srcdoc="pay_url" frameborder="0" style="width: 100% ;height:800px"></iframe>
    </el-dialog>
  </div>
</template>

<style scoped>
.el-descriptions {
  margin-top: 20px;
}
.info_table {
  margin: 20px 0;
}
</style>
